<script setup lang="ts">
import componentProperties from './component-properties.vue'
import layerProperties from './layer-properties.vue'
import moduleProperties from './module-properties.vue'
import { lowCodeStore } from '@src/store/lowCode.store'
import { LowCodePage } from '@src/config/interface'
import { ast } from '@src/utils/low-code/ast'
import { createElement } from '@src/utils/low-code/create'
import { eachRemoveClass, validateStyle } from '@src/utils/low-code/validateStyle'
const store = lowCodeStore()
interface State {
  active: string
  canvasVisible: boolean
  pageSetting: LowCodePage
}
const State = reactive<State>({
  active: 'components',
  canvasVisible: false,
  pageSetting: JSON.parse(JSON.stringify(store.getPageBounding)),
})
const canvasRef = ref<HTMLElement>()
// 打开画布设置
function canvasSetting() {
  State.canvasVisible = true
}
// 保存画布设置
function saveSetting() {
  store.setPageBounding(JSON.parse(JSON.stringify(State.pageSetting)))
  closeSetting()
}
// 关闭画布设置
function closeSetting() {
  State.canvasVisible = false
}

// 切换选中元素
function elementToggleFocus(e: Event) {
  if (canvasRef.value) {
    eachRemoveClass(canvasRef.value as HTMLElement, 'focus')
  }
  const target = e.target as HTMLElement
  if (target.classList.contains('focus')) {
    target.classList.remove('focus')
  } else {
    target.classList.add('focus')
  }
  if (validateStyle(target, "border-width", "0px") && target.parentElement) {
    target.parentElement.classList.add('focus')
  }
}
function ComponentDragEnter(e: DragEvent) {
  console.log(e)
}
function ConponentDragLeave(e: DragEvent) {
  console.log("dragleave", e)
}
</script>
<template>
  <div class="low-code-wrapper">
    <div class="control">
      <ElTabs v-model="State.active" type="border-card">
        <ElTabPane label="组件" name="components">
          <moduleProperties></moduleProperties>
        </ElTabPane>
        <ElTabPane label="图层" name="layer">
          <layerProperties></layerProperties>
        </ElTabPane>
      </ElTabs>
    </div>
    <div class="canvas-controls scrolling">
      <div class="canvas" ref="canvasRef" @dragover="ComponentDragEnter" @dragleave="ConponentDragLeave"
        :style="{ width: store.getPageBounding.width + 'px', height: store.getPageBounding.height + 'px' }"
        @click="elementToggleFocus">
        <component v-for="(item, index) in createElement(ast)" :key="index" :is="item"></component>
      </div>
    </div>
    <div class="properties">
      <div class="properties-setting">
        <ElButton type="primary" @click="canvasSetting">画布设置</ElButton>
        <componentProperties v-show="store.getPropertiesVisible"></componentProperties>
      </div>
    </div>
  </div>
  <ElDialog v-model="State.canvasVisible" width="400" title="画布设置">
    <ElForm>
      <ElFormItem label="画布宽度:">
        <ElInput v-model="State.pageSetting.width" />
      </ElFormItem>
      <ElFormItem label="画布高度:">
        <ElInput v-model="State.pageSetting.height" />
      </ElFormItem>
    </ElForm>
    <div slot="footer" style="text-align: right">
      <ElButton @click="closeSetting">取消</ElButton>
      <ElButton type="primary" @click="saveSetting">保存</ElButton>
    </div>
  </ElDialog>
</template>
<style lang="scss" scoped>
.low-code-wrapper {
  padding: 10px;
  display: flex;
  height: calc(100vh - 120px);
  background-color: #fff;

  .control {
    .el-tabs {
      height: 100%;
      overflow: hidden;
    }
  }

  .control,
  .properties {
    box-sizing: border-box;
    padding: 0 5px;
    flex: 0 0 200px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

    ::v-deep(.el-tabs__header) {
      border-bottom: none;
    }
  }

  .properties {
    .properties-setting {
      text-align: center;
      padding-top: 20px;

      ::v-deep(.el-button) {
        width: 80%;
      }
    }
  }

  .control {
    ::v-deep(.el-tabs__nav) {
      width: 100%;
      border: none;
      display: flex;

      .el-tabs__item {
        flex: 1;
        border: none;

        &+.el-tabs__item {
          border-left: 1px solid #efefef;
        }
      }
    }
  }

  .canvas-controls {
    flex: 1;
    padding: 10px;
    overflow: auto;
    background: #efefef;


    .focus {
      border: 1px solid var(--el-color-primary);
    }

    .canvas {
      margin: 0 auto;
      background-color: #fff;
      overflow: hidden;
      box-sizing: border-box;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
  }

}
</style>
